<template>
  <ErpLayout>
  <div class="modern-page test-mock-container">
    <div class="test-header modern-card__header">
      <h1 class="modern-text-gradient">Mock 系统测试页面</h1>
      <p>用于测试 Mock 接口是否正常工作</p>
    </div>

    <div class="test-sections">
      <!-- 认证接口测试 -->
      <div class="test-section modern-card modern-slide-in">
        <h2>🔐 认证接口测试</h2>
        <div class="test-buttons">
          <t-button 
            @click="testLogin" 
            :loading="loading.login"
            theme="primary"
            class="modern-btn-enhance"
          >
            测试登录
          </t-button>
          <t-button 
            @click="testRegister" 
            :loading="loading.register"
            variant="outline"
          >
            测试注册
          </t-button>
          <t-button 
            @click="testProfile" 
            :loading="loading.profile"
            variant="outline"
          >
            获取用户信息
          </t-button>
        </div>
        <div class="test-result modern-glass-light modern-rounded-md">
          <pre>{{ results.auth }}</pre>
        </div>
      </div>

      <!-- 用户管理接口测试 -->
      <div class="test-section modern-card modern-slide-in">
        <h2>👥 用户管理接口测试</h2>
        <div class="test-buttons">
          <t-button 
            @click="testUserList" 
            :loading="loading.userList"
            theme="primary"
            class="modern-btn-enhance"
          >
            获取用户列表
          </t-button>
          <t-button 
            @click="testUserStats" 
            :loading="loading.userStats"
            variant="outline"
          >
            获取用户统计
          </t-button>
        </div>
        <div class="test-result modern-glass-light modern-rounded-md">
          <pre>{{ results.user }}</pre>
        </div>
      </div>

      <!-- 菜单接口测试 -->
      <div class="test-section modern-card modern-slide-in">
        <h2>📋 菜单接口测试</h2>
        <div class="test-buttons">
          <t-button 
            @click="testMenuList" 
            :loading="loading.menuList"
            theme="primary"
            class="modern-btn-enhance"
          >
            获取菜单列表
          </t-button>
          <t-button @click="testUserMenus" :loading="loading.userMenus">
            获取用户菜单
          </t-button>
        </div>
        <div class="test-result">
          <pre>{{ results.menu }}</pre>
        </div>
      </div>

      <!-- 仪表盘接口测试 -->
      <div class="test-section">
        <h2>📊 仪表盘接口测试</h2>
        <div class="test-buttons">
          <t-button @click="testDashboardStats" :loading="loading.dashboardStats">
            获取统计数据
          </t-button>
          <t-button @click="testSalesTrend" :loading="loading.salesTrend">
            获取销售趋势
          </t-button>
          <t-button @click="testOverview" :loading="loading.overview">
            获取概览数据
          </t-button>
        </div>
        <div class="test-result">
          <pre>{{ results.dashboard }}</pre>
        </div>
      </div>
    </div>

    <!-- 全局状态 -->
    <div class="global-status">
      <h3>🌐 全局状态</h3>
      <div class="status-grid">
        <div class="status-item">
          <span class="label">Mock 状态:</span>
          <span class="value" :class="{ active: mockStatus.enabled }">
            {{ mockStatus.enabled ? '已启用' : '已禁用' }}
          </span>
        </div>
        <div class="status-item">
          <span class="label">日志状态:</span>
          <span class="value" :class="{ active: mockStatus.logEnabled }">
            {{ mockStatus.logEnabled ? '已启用' : '已禁用' }}
          </span>
        </div>
        <div class="status-item">
          <span class="label">延迟时间:</span>
          <span class="value">{{ mockStatus.timeout }}</span>
        </div>
      </div>
    </div>
  </div>
  </ErpLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
import { 
  login, 
  register, 
  getProfile,
  getUserList,
  getUserStats,
  getMenuList,
  getUserMenus,
  getDashboardStats,
  getSalesTrend,
  getDashboardOverview
} from '@/api'
import ErpLayout from '@/layouts/ErpLayout.vue'

// 加载状态
const loading = reactive({
  login: false,
  register: false,
  profile: false,
  userList: false,
  userStats: false,
  menuList: false,
  userMenus: false,
  dashboardStats: false,
  salesTrend: false,
  overview: false
})

// 测试结果
const results = reactive({
  auth: '点击按钮开始测试认证接口...',
  user: '点击按钮开始测试用户管理接口...',
  menu: '点击按钮开始测试菜单接口...',
  dashboard: '点击按钮开始测试仪表盘接口...'
})

// Mock 状态
const mockStatus = reactive({
  enabled: false,
  logEnabled: false,
  timeout: '未知'
})

// 测试登录
const testLogin = async () => {
  loading.login = true
  try {
    const result = await login({
      username: 'admin',
      password: '123456'
    })
    results.auth = JSON.stringify(result, null, 2)
    MessagePlugin.success('登录测试成功')
  } catch (error) {
    results.auth = `登录测试失败: ${error.message}`
    MessagePlugin.error('登录测试失败')
  } finally {
    loading.login = false
  }
}

// 测试注册
const testRegister = async () => {
  loading.register = true
  try {
    const result = await register({
      username: 'testuser',
      email: 'test@example.com',
      phone: '13800138099',
      password: '123456',
      confirmPassword: '123456',
      userType: 'employee',
      companyName: '测试公司',
      department: '测试部门',
      position: '测试职位',
      birthday: '1990-01-01',
      agreeTerms: true
    })
    results.auth = JSON.stringify(result, null, 2)
    MessagePlugin.success('注册测试成功')
  } catch (error) {
    results.auth = `注册测试失败: ${error.message}`
    MessagePlugin.error('注册测试失败')
  } finally {
    loading.register = false
  }
}

// 测试获取用户信息
const testProfile = async () => {
  loading.profile = true
  try {
    const result = await getProfile()
    results.auth = JSON.stringify(result, null, 2)
    MessagePlugin.success('获取用户信息测试成功')
  } catch (error) {
    results.auth = `获取用户信息测试失败: ${error.message}`
    MessagePlugin.error('获取用户信息测试失败')
  } finally {
    loading.profile = false
  }
}

// 测试获取用户列表
const testUserList = async () => {
  loading.userList = true
  try {
    const result = await getUserList({
      page: 1,
      pageSize: 5
    })
    results.user = JSON.stringify(result, null, 2)
    MessagePlugin.success('获取用户列表测试成功')
  } catch (error) {
    results.user = `获取用户列表测试失败: ${error.message}`
    MessagePlugin.error('获取用户列表测试失败')
  } finally {
    loading.userList = false
  }
}

// 测试获取用户统计
const testUserStats = async () => {
  loading.userStats = true
  try {
    const result = await getUserStats()
    results.user = JSON.stringify(result, null, 2)
    MessagePlugin.success('获取用户统计测试成功')
  } catch (error) {
    results.user = `获取用户统计测试失败: ${error.message}`
    MessagePlugin.error('获取用户统计测试失败')
  } finally {
    loading.userStats = false
  }
}

// 测试获取菜单列表
const testMenuList = async () => {
  loading.menuList = true
  try {
    const result = await getMenuList()
    results.menu = JSON.stringify(result, null, 2)
    MessagePlugin.success('获取菜单列表测试成功')
  } catch (error) {
    results.menu = `获取菜单列表测试失败: ${error.message}`
    MessagePlugin.error('获取菜单列表测试失败')
  } finally {
    loading.menuList = false
  }
}

// 测试获取用户菜单
const testUserMenus = async () => {
  loading.userMenus = true
  try {
    const result = await getUserMenus()
    results.menu = JSON.stringify(result, null, 2)
    MessagePlugin.success('获取用户菜单测试成功')
  } catch (error) {
    results.menu = `获取用户菜单测试失败: ${error.message}`
    MessagePlugin.error('获取用户菜单测试失败')
  } finally {
    loading.userMenus = false
  }
}

// 测试获取仪表盘统计
const testDashboardStats = async () => {
  loading.dashboardStats = true
  try {
    const result = await getDashboardStats()
    results.dashboard = JSON.stringify(result, null, 2)
    MessagePlugin.success('获取仪表盘统计测试成功')
  } catch (error) {
    results.dashboard = `获取仪表盘统计测试失败: ${error.message}`
    MessagePlugin.error('获取仪表盘统计测试失败')
  } finally {
    loading.dashboardStats = false
  }
}

// 测试获取销售趋势
const testSalesTrend = async () => {
  loading.salesTrend = true
  try {
    const result = await getSalesTrend({ days: 7 })
    results.dashboard = JSON.stringify(result, null, 2)
    MessagePlugin.success('获取销售趋势测试成功')
  } catch (error) {
    results.dashboard = `获取销售趋势测试失败: ${error.message}`
    MessagePlugin.error('获取销售趋势测试失败')
  } finally {
    loading.salesTrend = false
  }
}

// 测试获取概览数据
const testOverview = async () => {
  loading.overview = true
  try {
    const result = await getDashboardOverview()
    results.dashboard = JSON.stringify(result, null, 2)
    MessagePlugin.success('获取概览数据测试成功')
  } catch (error) {
    results.dashboard = `获取概览数据测试失败: ${error.message}`
    MessagePlugin.error('获取概览数据测试失败')
  } finally {
    loading.overview = false
  }
}

// 检查 Mock 状态
const checkMockStatus = () => {
  // 检查控制台是否有 Mock 相关的日志
  const mockEnabled = console.log.toString().includes('Mock')
  
  mockStatus.enabled = mockEnabled
  mockStatus.logEnabled = mockEnabled
  mockStatus.timeout = mockEnabled ? '200-600ms' : '未设置'
}

onMounted(() => {
  checkMockStatus()
  
  // 延迟检查，等待 Mock 服务启动
  setTimeout(() => {
    checkMockStatus()
  }, 1000)
})
</script>

<style scoped>
.test-mock-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-header {
  text-align: center;
  margin-bottom: 32px;
  padding: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  color: white;
}

.test-header h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 700;
}

.test-header p {
  margin: 0;
  opacity: 0.9;
}

.test-sections {
  display: grid;
  gap: 24px;
  margin-bottom: 32px;
}

.test-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.test-section h2 {
  margin: 0 0 16px 0;
  color: #1f2937;
  font-size: 20px;
}

.test-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.test-result {
  background: #f8fafc;
  border-radius: 8px;
  padding: 16px;
  max-height: 300px;
  overflow-y: auto;
}

.test-result pre {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #374151;
  white-space: pre-wrap;
  word-break: break-all;
}

.global-status {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.global-status h3 {
  margin: 0 0 16px 0;
  color: #1f2937;
  font-size: 18px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--modern-glass-bg-light);
  border-radius: var(--modern-radius-md);
  transition: var(--modern-transition-normal);
  
  &:hover {
    background: var(--modern-glass-bg);
    transform: translateY(-1px);
  }
}

.status-item .label {
  font-weight: 600;
  color: var(--modern-text-secondary);
}

.status-item .value {
  padding: 0.25rem 0.5rem;
  border-radius: var(--modern-radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.status-item .value.active {
  background: #10b981;
  color: white;
}

.status-item .value:not(.active) {
  background: #ef4444;
  color: white;
}

/* 现代化样式增强 */
.test-header {
  text-align: center;
  margin-bottom: 2rem;
  
  h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    letter-spacing: -0.025em;
  }
  
  p {
    font-size: 1rem;
    color: var(--modern-text-muted);
    margin: 0;
  }
}

.test-section {
  margin-bottom: 2rem;
  
  h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--modern-text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  &:hover {
    transform: translateY(-2px);
  }
}

.test-buttons {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

:deep(.t-button) {
  border-radius: var(--modern-radius-md);
  font-weight: 500;
  transition: var(--modern-transition-normal);
  
  &--theme-primary {
    background: var(--modern-gradient-primary);
    border: none;
    
    &:hover {
      background: var(--modern-gradient-secondary);
      transform: translateY(-2px);
      box-shadow: var(--modern-shadow-lg);
    }
  }
  
  &--variant-outline {
    border: 2px solid rgba(0, 0, 0, 0.1);
    background: var(--modern-glass-bg-light);
    backdrop-filter: var(--modern-blur-sm);
    
    &:hover {
      background: var(--modern-glass-bg);
      transform: translateY(-2px);
      box-shadow: var(--modern-shadow-md);
    }
  }
}

.test-result {
  padding: 1rem;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  
  pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: var(--modern-text-secondary);
    line-height: 1.5;
  }
}

@media (max-width: 768px) {
  .test-mock-container {
    padding: 16px;
  }
  
  .test-buttons {
    flex-direction: column;
  }
  
  .status-grid {
    grid-template-columns: 1fr;
  }
}
</style> 